<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <div class="title">{{ currentItem.resName }}</div>
        <div class="info">作者:{{ currentItem.publisher }}</div>
        <div class="info">时间:{{ currentItem.uploadTime }}</div>
      </div>
      <div class="right">
        <el-tag v-if="currentItem.type" :type="typesTag[currentItem.type]">{{ types[currentItem.type] }}</el-tag>
        <div class="right2">
          <div class="icon"><img src="/src/assets/images/zan.png" alt="" />{{ currentItem.starNum }}</div>
          <div class="icon"><img src="/src/assets/images/view.png" alt="" />{{ currentItem.watchNum }}</div>
          <div class="icon"><img src="/src/assets/images/xz.png" alt="" />{{ currentItem.downloadNum }}</div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="left">
        <vue-office-pdf :src="currentItem.previewUrl" style="height: 100%" @rendered="renderedHandler" @error="errorHandler" />
        <!-- <video controls="controls"></video> -->
        <!-- <iframe
          src="https://view.officeapps.live.com/op/embed.aspx?"
          frameborder="0"
          allowfullscreen
          class="preview-frame"
        ></iframe> -->
      </div>
      <div class="right">
        <div class="title"><img src="/src/assets/images/kczy.png" alt="" />课程资源</div>
        <div
          @click="change(index)"
          v-for="(item, index) in list"
          :key="index"
          :class="current === index ? 'active item' : 'item'"
        >
          <div class="title1"><img class="img" :src="getDynamicImage(item.icon)" />{{ item.title }}</div>
          <el-icon color="#1881FF" size="20" v-if="current === index"><Histogram /></el-icon>
          <div v-else class="status"></div>
        </div>
        <div @click="downloadFile(currentItem.downloadUrl)" class="download">
          <el-icon size="18"><Download /></el-icon> 下载课程包
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>感谢所有为资源建设提供资料的单位和个人</div>
      <div>未经允许不得转载或引用</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import VueOfficePdf from "@vue-office/pdf";
import { transformDate, downloadFile } from "@/utils";
const getDynamicImage = name => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href;
};
const types = {
  1: "音视频",
  2: "课程包",
  3: "数字教材"
};
const typesTag = {
  1: "primary",
  2: "warning",
  3: "success"
};
const current = ref(1);
const currentItem = ref({});
const list = ref([
  { key: 1, icon: "sp.png", title: "课程视频" },
  { key: 2, icon: "kj.png", title: "课件" },
  { key: 3, icon: "jxsj.png", title: "教学设计" },
  { key: 4, icon: "rw.png", title: "学习任务单" },
  { key: 5, icon: "lx.png", title: "课后练习" }
]);
// const pdf = ref("http://www.moe.gov.cn/srcsite/A16/s3342/201203/W020220704498224866735.pdf");
onMounted(() => {
  currentItem.value = JSON.parse(localStorage.getItem("resourceDetail"));
  console.log("currentItem", currentItem.value);
});
function change(index) {
  current.value = index;
}
</script>
<style lang="scss" scoped>
.container {
  width: 1618px;
  margin: 0 auto;
  border: 1px solid #e8f2ff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  .top {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 150px;
    padding: 20px 40px;
    font-size: 14px;
    color: #3963a6;
    border-bottom: 1px solid #e8f2ff;
    .title {
      margin-bottom: 19px;
      font-size: 28px;
      font-weight: 700;
      color: #1981ff;
    }
    .info {
      margin-bottom: 10px;
    }
    .right {
      display: flex;
      flex-basis: 250px;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      .tag {
        width: 66px;
      }
      .right2 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin-top: 54px;
        img {
          margin-right: 10px;
        }
      }
    }
  }
  .body {
    display: flex;

    // min-height: 1258px;
    .left {
      flex-grow: 1;
      overflow-y: scroll;
      video {
        width: 100%;

        // height: 100%;
      }
    }
    .right {
      flex-basis: 432px;
      border-left: 1px solid #e8f2ff;
      .title {
        display: flex;
        align-items: center;
        height: 52px;
        padding-left: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #2b6bb8;
        img {
          margin-right: 8px;
        }
      }
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 20px;
        font-size: 16px;
        color: #3963a6;
        cursor: pointer;
        img {
          width: 18px;
          height: 18px;
          margin-right: 8px;
        }
        .status {
          width: 14px;
          height: 14px;
          border: 1px solid #cccccc;
          border-radius: 50%;
        }
      }
      .active {
        background-color: #dbecff;
      }
      .download {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 138px;
        height: 40px;
        margin: 74px auto;
        font-size: 14px;
        color: #1881ff;
        cursor: pointer;
        background-color: #e7edff;
        border-radius: 4px;
      }
    }
  }
  .bottom {
    // height: 120px;
    padding: 40px 20px;
    font-size: 14px;
    color: #3963a6;
    border-top: 1px solid #e7edff;
  }
}
</style>
